// Captcha.tsx
import React, { useEffect, useState } from 'react';
import { getCaptcha } from '@/services/user';
import { ReloadOutlined } from '@ant-design/icons';
import { Spin } from 'antd';

const CaptchaSVG: React.FC<{ onLoad?: (svg: string) => void }> = ({ onLoad }) => {
    const [svg, setSvg] = useState<string>('');

    const load = async () => {
        setSvg('');
        const data = await getCaptcha();
        setSvg(data as string);
        onLoad?.(data as string);
    };

    useEffect(() => {
        load();
    }, []);

    return (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {svg ? (
                <div
                    style={{ cursor: 'pointer' }}
                    onClick={load}
                    dangerouslySetInnerHTML={{ __html: svg }}
                />
            )
                : (
                <Spin size="small" />
            )}
            {/*<ReloadOutlined onClick={load} style={{ cursor: 'pointer', color: '#999' }} />*/}
        </div>
    );
};

export default CaptchaSVG;